<template>
  <div class="add">
  <van-form @submit="onSubmit">
    <div id="top-line">
    <p>发布</p>
    <van-button  block size="small" type="info" native-type="submit">提交</van-button>
    </div>
 <van-field
  readonly
  clickable
  label="选择话题："
  name="type"
  :value="valueType.text"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>
<van-field
  v-model="title"
  rows="3"
  autosize
  name="title"
  type="textarea"
  maxlength="100"
  placeholder="说点什么吧"
  show-word-limit
/>

<van-field name="image">
  <template #input>
    <van-uploader v-model="fileList" multiple :after-read="submitPic"/>
   </template>
 </van-field> 
</van-form>
    <!-- 底部标签栏 -->
    <tab-btn></tab-btn>
  </div>
</template>

<script scoped>
import { Toast } from 'vant';
import tabBtn from "../components/tabBtn";
import axios from "axios";
export default {
  data() {
    return {
      title:"",
      fileList: [],
      valueType: "",
      showPicker: false,
       columns: [
        { id: 1, text: "图片" },
        { id: 2, text: "文字" },
        { id: 3, text: "视频" },
      ],
      image:'',
    };
  },
   methods: {
     onConfirm(value) {
      this.valueType = value;
      this.showPicker = false;
    },

    onSubmit(values) {
      let user_id=localStorage.getItem('user_id')
      axios.get('http://localhost:3000/addNews', {
        params:{
          title:this.title,
          type:this.valueType.id,
          images:this.image,
          user_id:user_id
        }
      }).then(res => {
        console.log(res);
        if(res.data.code==200){
           Toast.success('添加成功')
          location.reload()
        }
      });    
    },


    submitPic (file) {
      console.log(file.file);
      let params = new FormData();
      params.append("picture", file.file);
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios.post('http://localhost:3000/upload_img',params, config).then(res => {
        console.log(res.data.data);
        this.image=res.data.data
        
      });     
    },    
   },
  components: {
    tabBtn,
},
}
</script>

<style scoped>
.van-icon-add::before {
    content: '\F002';
    margin-top: 10px;
    margin-left: 10px;
}
.van-cell{
  height: 150px;
}
.van-field__word-limit{
  margin-top: 50px;
}
.van-button--round {
    border-radius: 141px;
}
.van-button--block {
    display: block;
    width: max-content;
    margin:3px auto;
    margin-right: 10px;
}
#top-line p{
    position: absolute;
    margin-top: 10px;
    margin-left: 160px;
    /* left: 160px; */
}
.van-uploader__wrapper{
  margin: 10px;
}
.van-cell--clickable {
    cursor: pointer;
    height: 45px;
    background: rgb(233, 223, 223);
}
.van-button--info{
  border-radius: 10px;
}
</style>
